<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      inline-message
    >
      <el-form-item label="名称">
        <el-input
          v-model="formInline.title"
          placeholder="请输入标题"
          clearable
        />
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          v-model="formInline.position"
          placeholder="请选择类型"
          clearable
        >
          <el-option
            v-for="item in ls"
            :key="item._id"
            :label="item.title"
            :value="item.title"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getlist">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      </el-form-item>
    </el-form>

    <el-card class="box-card">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="100%"
        toggleRowExpansion="expanded"
      >
        <el-table-column prop="_id" label="编号" />
        <el-table-column prop="title" label="名称" />
        <el-table-column label="图片" #default="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.pic"
            :zoom-rate="1.2"
            :initial-index="4"
            fit="cover"
          />
        </el-table-column>
        <el-table-column label="类型" #default="{ row }">
          <div>{{ row.tid.title }}</div>
        </el-table-column>

        <el-table-column label="是否启用" #default="scope">
          <el-switch
            v-model="scope.row.show"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            @change="switchchange(scope.row)"
          />
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="
                edit(scope.row);
                dialogVisible_show = true;
              "
              >查看</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="
                edit(scope.row);
                dialogVisible_edit = true;
              "
              >修改</el-button
            >
            <el-button link type="primary" size="small" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pagenum"
        v-model:page-size="pagesize"
        :page-sizes="[3, 5, 10, 20]"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 添加 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加"
      width="60%"
      @before-close="handleClose"
      draggable
      align-center
    >
      <el-form label-width="100px" :model="formadd" style="max-width: 460px">
        <el-form-item label="标题">
          <el-input v-model="formadd.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="formadd.tid" placeholder="请选择类型" clearable>
            <el-option
              v-for="item in ls"
              :key="item._id"
              :label="item.title"
              :value="item._id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="formadd.time"
            type="datetime"
            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="formadd.content" placeholder="请输入内容" />
        </el-form-item>

        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3050/mbw/upload"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              form_add();
              dialogVisible = false;
            "
          >
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      v-model="dialogVisible_edit"
      title="添加"
      width="60%"
      @before-close="handleClose"
      draggable
      align-center
    >
      <el-form label-width="100px" :model="show" style="max-width: 460px">
        <el-form-item label="标题">
          <el-input v-model="show.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="show.tid._id" placeholder="请选择类型" clearable>
            <el-option
              v-for="item in ls"
              :key="item._id"
              :label="item.title"
              :value="item._id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="show.time"
            type="datetime"
            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="show.content" placeholder="请输入内容" />
        </el-form-item>

        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3050/mbw/upload"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible_edit = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              form_edit();
              dialogVisible_edit = false;
            "
          >
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog
      v-model="dialogVisible_show"
      title="添加"
      width="60%"
      @before-close="handleClose"
      draggable
      align-center
    >
      <el-form label-width="100px" :model="show" style="max-width: 460px">
        <el-form-item label="标题">
          <el-input v-model="show.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="show.tid._id" placeholder="请选择类型" clearable>
            <el-option
              v-for="item in ls"
              :key="item._id"
              :label="item.title"
              :value="item._id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="show.time"
            type="datetime"
            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="show.content" placeholder="请输入内容" />
        </el-form-item>

        <el-form-item label="图片">
          <img
            v-if="imageUrl"
            :src="imageUrl"
            class="avatar"
            style="width: 300px"
          />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from "axios";
import { reactive, ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";

const formInline = reactive({
  title: "",
  classify: "",
});

let tableData = ref([]);
let pagenum = ref(1);
let pagesize = ref(3);
let total = ref(0);
let ls = ref([]);
let dialogVisible = ref(false);
let dialogVisible_edit = ref(false);
let dialogVisible_show = ref(false);
let imageUrl = ref("");
let formadd = reactive({
  title: "",
  pic: "",
  time: "",
  uid: {},
  content: "",
  tid: "",
});
let show = reactive({});

onMounted(() => {
  getlist();
  getls();
});
let getls = async () => {
  let { data } = await axios.get("http://localhost:3050/mbw/title_list");
  console.log(data);
  ls.value = data.data;
};
let getlist = async () => {
  let obj = { ...formInline };
  let { data } = await axios.get("http://localhost:3050/mbw/comment_list", {
    params: {
      pagenum: pagenum.value,
      pagesize: pagesize.value,
      title: obj.title,
      classify: obj.classify,
    },
  });
  console.log(data);
  total.value = data.total;
  tableData.value = data.data;
};

let handleSizeChange = (val) => {
  pagesize.value = val;
  getlist();
};
let handleCurrentChange = (val) => {
  pagenum.value = val;
  getlist();
};
let handleAvatarSuccess = (val) => {
  console.log(val);
  imageUrl.value = val.img;
};
let switchchange = (row) => {
  axios.post("http://localhost:3050/mbw/comment_edit/" + row._id, { ...row });
};
let handleClose = () => {
  ElMessageBox.confirm("是否取消")
    .then(() => {
      dialogVisible = false;
    })
    .catch(() => {});
};
let form_add = () => {
  formadd.pic = imageUrl.value;
  console.log(formadd);
  axios.post("http://localhost:3050/mbw/comment_add", formadd);
  getlist();
};
let edit = (row) => {
  show = { ...row };
  console.log(show);
  imageUrl = row.pic;
};
let form_edit = () => {
  axios.post("http://localhost:3050/mbw/comment_edit/" + show._id, show);
  getlist();
};
let del = (row) => {
  axios.post("http://localhost:3050/mbw/comment_del/" + row._id);
  getlist();
};
</script>

<style scoped>
.el-form {
  margin-top: 10px;
  width: 100%;
}
.box-card {
  margin-top: 20px;
}
.el-form {
  margin: auto;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
